<template>
  <div class="journal-banner">
    <el-header style="font-size: 20px; font-weight: bold;">
        <i class="el-icon-notebook-1" style="margin-right: 15px"></i>
        <span>中台日志</span>
    </el-header>
    <div class="journal-contain">
      <el-table
        fits
        :data="tableData"
        border
        style="width: 100%">
         <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          ref = "select"
          label="序号" width="55">
        </el-table-column>
        <el-table-column
          prop="log_name"
          label="主体事件">
        </el-table-column>
        <el-table-column
          prop="log_about"
          label="事件描述">
        </el-table-column>
        <el-table-column
          prop="log_result"
          label="事件结果"
          width="180">
        </el-table-column>
        <el-table-column
          prop="log_time"
          label="记录时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-button
        style="float: right;
        padding: 15px 40px 15px 40px;
        margin: 20px 5px 20px 0px"
        type="primary"
        @click="log_output()"
        >导出</el-button>
      </el-row>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        tableData: [],
      }
    },
    mounted(){
      const url = 'http://localhost:5000/sys_log'
      axios.get(url).then(response => {
        const result = response.data
        this.tableData = result.tableData
      })
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      del(e) {
         JSON.stringify(e)
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('http://localhost:5000/log_del',{'del_item': e.id})
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      log_output() {
        this.$confirm('此操作将导出日志为log文件，注意保存和信息安全, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('http://localhost:5000/log_output',{'output_item': 'all'})
          this.$message({
            type: 'success',
            message: '导出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消导出'
          });
        });
      },
    }
  }
</script>

<style lang="scss" scoped>

.journal-banner{
  margin: 0.3%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.el-header {
    background-color: rgba(51, 48, 51, 0.219);
    color: #333;
    line-height: 60px;
  }
</style>
